<template>
  <div class="notice_wrap">
    <headTop :headClass="'white_header'">
      Notice
    </headTop>
    <div class="scroll_wrap" ref="scrollBox">
      <ul class="list_wrap" ref="scrollBoxInner">
        <div class="kong"></div>
        <li class="public_none_data" v-if="!newsList.length">No data</li>
        <li class="item_wrap" v-for="(item, index) in newsList" :key="index" @click="goDetail(item.id)" v-else>
          <div class="left_content">
            <div class="content_top">
              <span class="title" :class="{'read': item.state === 1, 'no_read': item.du === 0}">{{item.title}}</span>
              <!-- <span class="create_time">{{item.created_at}}</span> -->
            </div>
            <div class="content">{{item.conten}}</div>
          </div>
          <span class="iconfont icon-fanhui-copy-copy"></span>
        </li>
        <div class="data_none" v-if="newsList.length">No more....</div>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'notice',
  data () {
    return {
      isRequest: false, // Have you requested data?
      canRequest: true, // Can you request data, request lock?
      page: 1, // Paging default data
      hasMoreData: true, // Do you have more data?
      newsList: []
    };
  },
  methods: {
    goDetail (id) {
      this.$router.push({path: 'noticeDetails', query: {id: id}});
    },
    // List interface
    getList () {
      this.canRequest = false;
      this.axios.get('index/notice/active', {
        params: {
          page: this.page
        }
      }).then(({data}) => {
        this.isRequest = true;
        if (data.status === 200) {
          this.canRequest = true;
          this.page++;
          let resObj;
          resObj = data.data;
          if (resObj.length < 10 || !resObj.length || !resObj) {
            this.hasMoreData = false;
          } else {
            this.hasMoreData = true;
          }
          let sort = [];
          for (let i of this.newsList.concat(resObj)) {
            if (i.du === 0) {
              sort.unshift(i);
            } else {
              sort.push(i);
            }
          }
          this.newsList = sort;
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  mounted () {
    this.$refs.scrollBox.onscroll = (e) => {
      let bottomClient = this.$refs.scrollBoxInner.clientHeight - e.target.scrollTop - e.target.clientHeight;
      if (bottomClient < 50 && this.canRequest && this.hasMoreData) this.getList();
    };
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .notice_wrap{
    height: 100%;
    padding-top: 90px;
    background: #fff;
    .scroll_wrap {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      .list_wrap {
        // width: 100%;
        // height: 100%;
        .kong {
          width: 100%;
          height: 20px;
          background: #f4f5f7;
        }
        .item_wrap {
          width: 100%;
          height: 197px;
          padding: 0 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1Px solid #e5e5e5;
          position: relative;
          margin-top: 20px;
          &::after {
            display: block;
            width: 100%;
            height: 20px;
            content: '';
            background: #f4f5f7;
            position: absolute;
            top: 197px;
            left: 0;
          }
          .left_content {
            width: 93%;
            .content_top {
              height: 100px;
              line-height: 100px;
              border-bottom: 1Px solid #e5e5e5;
              display: flex;
              justify-content: flex-start;
              .title {
                max-width: 50%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 30px;
              }
              .read {
                color: #222222;
              }
              .no_read {
                color: #ff9e27;
              }
              .create_time {
                font-size: 24px;
                color: #999999;
                padding-left: 32px;
                margin-top: 3px;
              }
            }
            .content {
              height: 96px;
              line-height: 96px;
              font-size: 26px;
              color: #999999;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .icon-fanhui-copy-copy {
            font-size: 30px;
            color: #afabbd;
          }
        }
        .item_wrap:nth-of-type(1) {
          margin-top: 0px;
        }
        .public_none_data {
          position: absolute;
          left: 0;
          right: 0;
          top: 30%;
          bottom: 0;
          margin: auto;
        }
        .data_none {
          text-align: center;
          line-height: 121px;
          font-size: 24px;
          color: #999999;
        }
      }
    }
  }
</style>
